import { Table } from '@arco-design/web-react'
import React from 'react'
import { arrayToTree } from '../../utils/arrayHandler'

export interface IApiListSelectProps {
    // 数据
    data: IListItem[]
    // 选中行
    selectedRowKeys?: string[]
    // 选中行变化
    onSelectedRowKeysChange?: (keys: string[]) => void
}

const ApiListSelect: React.FC<IApiListSelectProps> = ({
    data: propsData,
    selectedRowKeys,
    onSelectedRowKeysChange,
}) => {
    // 递归获取所有key
    const getKeys = (record: IListItem) => {
        const keys = [record.id]
        if (record.type === 'group') {
            record.children?.forEach((item) => {
                keys.push(...getKeys(item))
            })
        }
        return keys
    }

    // 选中
    const handleSelect = (selected: boolean, record: IListItem) => {
        const newSelectedRowKeys = [...(selectedRowKeys || [])]
        if (selected) {
            newSelectedRowKeys.push(record.id)
        } else {
            newSelectedRowKeys.splice(newSelectedRowKeys.indexOf(record.id), 1)
        }
        if (record.type === 'group') {
            const keys = getKeys(record)
            keys.forEach((key) => {
                if (selected) {
                    newSelectedRowKeys.push(key)
                } else {
                    newSelectedRowKeys.splice(
                        newSelectedRowKeys.indexOf(key),
                        1,
                    )
                }
            })
        }
        onSelectedRowKeysChange?.(newSelectedRowKeys)
    }

    // 全选
    const handleSelectAll = (selected: boolean) => {
        const newSelectedRowKeys: string[] = []
        if (selected) {
            propsData.forEach((item) => {
                const keys = getKeys(item)
                keys.forEach((key) => {
                    newSelectedRowKeys.push(key)
                })
            })
        }
        onSelectedRowKeysChange?.(newSelectedRowKeys)
    }

    return (
        <div>
            <Table
                size='mini'
                rowKey='id'
                scroll={{ y: 200 }}
                rowSelection={{
                    selectedRowKeys,
                    type: 'checkbox',
                    onSelect: handleSelect,
                    onSelectAll: handleSelectAll,
                }}
                columns={[
                    // {
                    //     title: '序号',
                    //     dataIndex: 'index',
                    //     width: 80,
                    //     render: (_, _item, index) => index + 1,
                    //     cellStyle: {
                    //         textAlign: 'right',
                    //     },
                    // },
                    {
                        title: '名称',
                        dataIndex: 'label',
                        width: 150,
                        ellipsis: true,
                    },
                    { title: '类型', dataIndex: 'type', width: 80 },
                    { title: '请求方法', dataIndex: 'method', width: 80 },
                    { title: '请求地址', dataIndex: 'url', ellipsis: true },
                ]}
                pagination={false}
                data={arrayToTree(propsData)}
            />
        </div>
    )
}

export default ApiListSelect
